<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>抓取源 - 盖世数据智能分析平台</title>
    <!-- 固定样式引入 - 不可修改路径 -->
    <!-- 引入React和ReactDOM -->
    <script src="/libs/react.development.js"></script>
    <script src="/libs/react-dom.development.js"></script>

    <!-- 引入Material-UI核心依赖 -->
    <script src="/libs/material-ui.development.js"></script>
    <script src="/libs/emotion-react.umd.min.js"></script>
    <script src="/libs/emotion-styled.umd.min.js"></script>

    <!-- 引入Babel用于解析JSX -->
    <script src="/libs/babel.min.js"></script>

    <!-- 引入Material图标（可选） -->
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
    <link rel="stylesheet" href="/pages/app.css">
</head>

<body>
    <div id="root"></div>

    <!-- 固定脚本引入 - 不可修改路径 -->
    <script type="text/babel" data-type="module">
        // 固定核心库引入
        import iToolX, { iUpload, iUtils, iEmit } from "http://a72dfc24ac69ccae7cf363c09e192c19.editor.aibot.gasgoo.com/editor-ui/client.js?a72dfc24ac69ccae7cf363c09e192c19";
        import clientState from "/pages/clientState.js";

        // 从MUI导入所需组件
        const { 
            Button, 
            Card, 
            CardContent, 
            CardHeader, 
            Typography,
            Table,
            TableBody,
            TableCell,
            TableContainer,
            TableHead,
            TableRow,
            Paper,
            TextField,
            InputAdornment,
            IconButton,
            Dialog,
            DialogTitle,
            DialogContent,
            DialogActions,
            FormControlLabel,
            Switch,
            Box,
            Grid,
            Chip,
            Tooltip,
            Snackbar,
            Alert,
            Pagination,
            Tabs,
            Tab,
            CircularProgress
        } = MaterialUI;

        // 创建React组件
        function App() {
            // 状态管理
            const [sources, setSources] = React.useState([]);
            const [loading, setLoading] = React.useState(true);
            const [openDialog, setOpenDialog] = React.useState(false);
            const [editingSource, setEditingSource] = React.useState(null);
            const [formData, setFormData] = React.useState({ 
                siteUrl: '', 
                siteTitle: '', 
                isEnable: true,
                enhancedCrawlFlag: false,
                comment: '',
                commentId: null
            });
            const [snackbar, setSnackbar] = React.useState({ open: false, message: '', severity: 'success' });
            const [searchTerm, setSearchTerm] = React.useState('');
            const [statusFilter, setStatusFilter] = React.useState(null);
            const [pagination, setPagination] = React.useState({ page: 1, pageSize: 10, total: 0 });
            const [activeTab, setActiveTab] = React.useState(0);
            const [commentLoading, setCommentLoading] = React.useState(false);

            // 从客户端状态获取筛选条件
            React.useEffect(() => {
                try {
                    if (clientState && typeof clientState.getSourceFilters === 'function') {
                        const filters = clientState.getSourceFilters();
                        if (filters.siteTitle) setSearchTerm(filters.siteTitle);
                        if (filters.isEnable !== undefined) setStatusFilter(filters.isEnable);
                    }
                } catch (error) {
                    console.error('获取筛选条件失败:', error);
                }
            }, []);

            // 保存筛选条件到客户端状态
            React.useEffect(() => {
                try {
                    if (clientState && typeof clientState.setSourceFilters === 'function') {
                        clientState.setSourceFilters({ siteTitle: searchTerm, isEnable: statusFilter });
                    }
                } catch (error) {
                    console.error('保存筛选条件失败:', error);
                }
            }, [searchTerm, statusFilter]);

            // 加载抓取源列表
            const loadSources = async () => {
                setLoading(true);
                try {
                    const response = await iToolX.modules.sourceManager.getSourceList(
                        searchTerm, 
                        statusFilter, 
                        pagination.page, 
                        pagination.pageSize
                    );
                    
                    if (response.code !== 200) {
                        throw new Error(response.message);
                    }
                    
                    // 为每个源加载注释信息
                    const sourcesWithComments = await Promise.all(
                        response.data.list.map(async (source) => {
                            try {
                                const commentResponse = await iToolX.modules.sourceManager.getSourceComments(source.id);
                                if (commentResponse.code === 200 && commentResponse.data.list.length > 0) {
                                    const comments = commentResponse.data.list.sort((a, b) => 
                                        new Date(b.create_at) - new Date(a.create_at)
                                    );
                                    const latestComment = comments[0];
                                    return {
                                        ...source,
                                        commentId: latestComment.id,
                                        comment: latestComment.content
                                    };
                                } else {
                                    return {
                                        ...source,
                                        commentId: null,
                                        comment: '暂无注释信息'
                                    };
                                }
                            } catch (error) {
                                console.log(`获取抓取源 ${source.id} 的注释失败，使用默认值:`, error.message);
                                return {
                                    ...source,
                                    commentId: null,
                                    comment: '暂无注释信息'
                                };
                            }
                        })
                    );
                    
                    setSources(sourcesWithComments);
                    setPagination(prev => ({ ...prev, total: response.data.total }));
                } catch (error) {
                    showSnackbar(error.message, 'error');
                } finally {
                    setLoading(false);
                }
            };

            // 初始化加载数据
            React.useEffect(() => {
                loadSources();
            }, [pagination.page, pagination.pageSize, searchTerm, statusFilter]);

            // 显示提示消息
            const showSnackbar = (message, severity = 'success') => {
                setSnackbar({ open: true, message, severity });
            };

            // 关闭提示消息
            const handleCloseSnackbar = () => {
                setSnackbar({ ...snackbar, open: false });
            };

            // 打开添加对话框
            const handleAdd = () => {
                setEditingSource(null);
                setFormData({ 
                    siteUrl: '', 
                    siteTitle: '', 
                    isEnable: true,
                    enhancedCrawlFlag: false,
                    comment: '',
                    commentId: null
                });
                setOpenDialog(true);
            };

            // 打开编辑对话框
            const handleEdit = (source) => {
                setEditingSource(source);
                setFormData({ 
                    siteUrl: source.site_url, 
                    siteTitle: source.site_title, 
                    isEnable: source.is_enable,
                    enhancedCrawlFlag: source.enhanced_crawl_flag || false,
                    comment: source.comment || '',
                    commentId: source.commentId || null
                });
                setOpenDialog(true);
            };

            // 关闭对话框
            const handleCloseDialog = () => {
                setOpenDialog(false);
            };

            // 处理表单字段变化
            const handleFieldChange = (field, value) => {
                setFormData({ ...formData, [field]: value });
            };

            // 保存抓取源
            const handleSave = async () => {
                try {
                    if (!formData.siteUrl || !formData.siteTitle) {
                        showSnackbar('请填写完整的抓取源信息', 'error');
                        return;
                    }

                    let response;
                    let sourceId;
                    
                    if (editingSource) {
                        // 更新现有抓取源
                        response = await iToolX.modules.sourceManager.updateSource(
                            editingSource.id,
                            formData.siteUrl,
                            formData.siteTitle,
                            formData.isEnable,
                            formData.enhancedCrawlFlag
                        );
                        
                        if (response.code !== 200) {
                            throw new Error(response.message);
                        }
                        
                        sourceId = editingSource.id;
                        
                        // 处理注释
                        if (formData.comment.trim() !== '') {
                            try {
                                if (editingSource.commentId) {
                                    const commentResponse = await iToolX.modules.sourceManager.updateSourceComment(
                                        editingSource.commentId,
                                        formData.comment
                                    );
                                    if (commentResponse.code !== 200) {
                                        throw new Error(commentResponse.message);
                                    }
                                } else {
                                    const commentResponse = await iToolX.modules.sourceManager.addSourceComment(
                                        sourceId,
                                        formData.comment
                                    );
                                    if (commentResponse.code !== 200) {
                                        throw new Error(commentResponse.message);
                                    }
                                }
                            } catch (commentError) {
                                console.log('注释操作失败，但抓取源已更新:', commentError.message);
                            }
                        } else {
                            if (editingSource.commentId) {
                                try {
                                    const deleteResponse = await iToolX.modules.sourceManager.deleteSourceComment(
                                        editingSource.commentId
                                    );
                                    if (deleteResponse.code !== 200) {
                                        throw new Error(deleteResponse.message);
                                    }
                                } catch (deleteError) {
                                    console.log('删除注释失败，但抓取源已更新:', deleteError.message);
                                }
                            }
                        }
                    } else {
                        // 添加新抓取源
                        response = await iToolX.modules.sourceManager.addSource(
                            formData.siteUrl,
                            formData.siteTitle,
                            formData.isEnable,
                            formData.enhancedCrawlFlag
                        );
                        
                        if (response.code !== 200) {
                            throw new Error(response.message);
                        }
                        
                        sourceId = response.data.id;
                        
                        // 添加注释（如果有）
                        if (formData.comment.trim() !== '') {
                            try {
                                const commentResponse = await iToolX.modules.sourceManager.addSourceComment(
                                    sourceId,
                                    formData.comment
                                );
                                if (commentResponse.code !== 200) {
                                    throw new Error(commentResponse.message);
                                }
                            } catch (commentError) {
                                console.log('添加注释失败，但抓取源已创建:', commentError.message);
                            }
                        }
                    }

                    showSnackbar(editingSource ? '抓取源更新成功' : '抓取源添加成功');
                    handleCloseDialog();
                    loadSources();
                } catch (error) {
                    showSnackbar(error.message, 'error');
                }
            };

            // 删除抓取源
            const handleDelete = async (id) => {
                if (!window.confirm('确定要删除这个抓取源吗？')) {
                    return;
                }

                try {
                    const response = await iToolX.modules.sourceManager.deleteSource(id);
                    
                    if (response.code !== 200) {
                        throw new Error(response.message);
                    }
                    
                    showSnackbar('抓取源删除成功');
                    loadSources();
                } catch (error) {
                    showSnackbar(error.message, 'error');
                }
            };

            // 切换抓取源状态
            const handleToggleStatus = async (id, enable) => {
                try {
                    const response = await iToolX.modules.sourceManager.toggleSourceStatus(id, enable);
                    
                    if (response.code !== 200) {
                        throw new Error(response.message);
                    }
                    
                    showSnackbar(enable ? '抓取源已启用' : '抓取源已禁用');
                    loadSources();
                } catch (error) {
                    showSnackbar(error.message, 'error');
                }
            };

            // 切换增强抓取标记
            const handleToggleEnhancedCrawl = async (id, enhancedFlag) => {
                try {
                    const response = await iToolX.modules.sourceManager.toggleEnhancedCrawlFlag(id, enhancedFlag);
                    
                    if (response.code !== 200) {
                        throw new Error(response.message);
                    }
                    
                    showSnackbar(enhancedFlag ? '已启用增强抓取' : '已禁用增强抓取');
                    loadSources();
                } catch (error) {
                    showSnackbar(error.message, 'error');
                }
            };

            // 处理分页变化
            const handlePageChange = (event, page) => {
                setPagination({ ...pagination, page });
            };

            // 处理每页数量变化
            const handlePageSizeChange = (event) => {
                const pageSize = parseInt(event.target.value);
                setPagination({ page: 1, pageSize, total: pagination.total });
            };

            // 格式化日期
            const formatDate = (dateString) => {
                if (!dateString) return '-';
                const date = new Date(dateString);
                return date.toLocaleString('zh-CN');
            };

            // 处理标签页切换
            const handleTabChange = (event, newValue) => {
                setActiveTab(newValue);
            };

            // 批量更新注释
            const handleBatchUpdateComments = async () => {
                setCommentLoading(true);
                try {
                    const updatePromises = sources.map(async (source) => {
                        if (source.commentId) {
                            return iToolX.modules.sourceManager.updateSourceComment(
                                source.commentId,
                                source.comment
                            );
                        } else if (source.comment !== '暂无注释信息' && source.comment !== '获取注释失败') {
                            return iToolX.modules.sourceManager.addSourceComment(
                                source.id,
                                source.comment
                            );
                        }
                        return Promise.resolve();
                    });

                    await Promise.all(updatePromises);
                    showSnackbar('批量更新注释成功');
                } catch (error) {
                    showSnackbar(`批量更新注释失败: ${error.message}`, 'error');
                } finally {
                    setCommentLoading(false);
                }
            };

            return (
                <div className="page-wrapper">
                    {/* 顶部导航 */}
                    <header className="header">
                        <div className="nav-container">
                            <div className="logo">
                                <div className="logo-icon">C</div>
                                <span>盖世数据智能分析平台</span>
                            </div>
                            <nav>
                                <ul className="nav-menu">
                                    <li className="nav-item">
                                        <a href="/pages/home.html" className="nav-link">首页</a>
                                    </li>
                                    <li className="nav-item">
                                        <a href="/pages/business/sources.html" className="nav-link active">抓取源</a>
                                    </li>
                                    <li className="nav-item">
                                        <a href="/pages/business/contentManagement.html" className="nav-link">抓取内容</a>
                                    </li>
                                    <li className="nav-item">
                                        <a href="/pages/business/analysisList.html" className="nav-link">抓取内容分析</a>
                                    </li>
                                    <li className="nav-item">
                                        <a href="/pages/business/promptTemplateManagement.html" className="nav-link">提示词管理</a>
                                    </li>
                                    <li className="nav-item">
                                        <a href="/pages/business/contentPoolManagement.html" className="nav-link">内容池管理</a>
                                    </li>
                                </ul>
                            </nav>
                            <div className="nav-actions">
                                <div className="search-box">
                                    <span className="material-icons search-icon">search</span>
                                    <input 
                                        type="text" 
                                        className="search-input" 
                                        placeholder="搜索..."
                                    />
                                </div>
                            </div>
                        </div>
                    </header>

                    {/* 主体内容 */}
                    <main className="main-content">
                        <div className="container">
                            <div className="card">
                                <div className="card-header">
                                    <h2 className="card-title">抓取源管理</h2>
                                    <Button 
                                        className="btn-primary"
                                        startIcon={<span className="material-icons">add</span>}
                                        onClick={handleAdd}
                                    >
                                        添加抓取源
                                    </Button>
                                </div>

                                {/* 标签页 */}
                                <Box sx={{ borderBottom: 1, borderColor: '#E5E5E5', mb: 3 }}>
                                    <Tabs value={activeTab} onChange={handleTabChange}>
                                        <Tab label="抓取源列表" />
                                        <Tab label="注释管理" />
                                    </Tabs>
                                </Box>

                                {/* 标签页内容 */}
                                {activeTab === 0 && (
                                    <>
                                        {/* 搜索和筛选区域 */}
                                        <Box sx={{ mb: 3, display: 'flex', gap: 2, flexWrap: 'wrap' }}>
                                            <TextField
                                                placeholder="搜索站点标题..."
                                                value={searchTerm}
                                                onChange={(e) => setSearchTerm(e.target.value)}
                                                InputProps={{
                                                    startAdornment: (
                                                        <InputAdornment position="start">
                                                            <span className="material-icons">search</span>
                                                        </InputAdornment>
                                                    ),
                                                }}
                                                sx={{ minWidth: 250 }}
                                                variant="outlined"
                                                size="small"
                                            />
                                            
                                            <Box sx={{ display: 'flex', gap: 1, alignItems: 'center' }}>
                                                <Typography variant="body2">状态:</Typography>
                                                <Chip 
                                                    label="全部" 
                                                    clickable 
                                                    color={statusFilter === null ? "primary" : "default"}
                                                    onClick={() => setStatusFilter(null)}
                                                    size="small"
                                                    className={statusFilter === null ? "tag-blue" : ""}
                                                />
                                                <Chip 
                                                    label="启用" 
                                                    clickable 
                                                    color={statusFilter === true ? "primary" : "default"}
                                                    onClick={() => setStatusFilter(true)}
                                                    size="small"
                                                    className={statusFilter === true ? "tag-blue" : ""}
                                                />
                                                <Chip 
                                                    label="禁用" 
                                                    clickable 
                                                    color={statusFilter === false ? "primary" : "default"}
                                                    onClick={() => setStatusFilter(false)}
                                                    size="small"
                                                    className={statusFilter === false ? "tag-blue" : ""}
                                                />
                                            </Box>
                                        </Box>

                                        {/* 数据表格 */}
                                        <TableContainer component={Paper} sx={{ mb: 3, border: '1px solid #E5E5E5' }}>
                                            <Table>
                                                <TableHead>
                                                    <TableRow>
                                                        <TableCell sx={{ fontWeight: 'bold' }}>ID</TableCell>
                                                        <TableCell sx={{ fontWeight: 'bold' }}>站点标题</TableCell>
                                                        <TableCell sx={{ fontWeight: 'bold' }}>站点URL</TableCell>
                                                        <TableCell sx={{ fontWeight: 'bold' }}>文章数量</TableCell>
                                                        <TableCell sx={{ fontWeight: 'bold' }}>增强抓取</TableCell>
                                                        <TableCell sx={{ fontWeight: 'bold' }}>状态</TableCell>
                                                        <TableCell sx={{ fontWeight: 'bold' }}>最后抓取时间</TableCell>
                                                        <TableCell sx={{ fontWeight: 'bold' }}>操作</TableCell>
                                                    </TableRow>
                                                </TableHead>
                                                <TableBody>
                                                    {loading ? (
                                                        <TableRow>
                                                            <TableCell colSpan={8} align="center">
                                                                <CircularProgress size={24} sx={{ mr: 1 }} />
                                                                <Typography>加载中...</Typography>
                                                            </TableCell>
                                                        </TableRow>
                                                    ) : sources.length === 0 ? (
                                                        <TableRow>
                                                            <TableCell colSpan={8} align="center">
                                                                <Typography>暂无数据</Typography>
                                                            </TableCell>
                                                        </TableRow>
                                                    ) : (
                                                        sources.map((source) => (
                                                            <TableRow 
                                                                key={source.id}
                                                                className="data-table"
                                                            >
                                                                <TableCell>{source.id}</TableCell>
                                                                <TableCell>{source.site_title}</TableCell>
                                                                <TableCell>
                                                                    <Tooltip title={source.site_url}>
                                                                        <Typography 
                                                                            sx={{ maxWidth: 200, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}
                                                                        >
                                                                            {source.site_url}
                                                                        </Typography>
                                                                    </Tooltip>
                                                                </TableCell>
                                                                <TableCell>
                                                                    <Chip 
                                                                        label={source.article_count || 0} 
                                                                        color="info"
                                                                        size="small"
                                                                    />
                                                                </TableCell>
                                                                <TableCell>
                                                                    <Tooltip title={source.enhanced_crawl_flag ? "已启用增强抓取" : "未启用增强抓取"}>
                                                                        <Chip 
                                                                            label={source.enhanced_crawl_flag ? "已启用" : "未启用"} 
                                                                            color={source.enhanced_crawl_flag ? "secondary" : "default"}
                                                                            size="small"
                                                                        />
                                                                    </Tooltip>
                                                                </TableCell>
                                                                <TableCell>
                                                                    <Chip 
                                                                        label={source.is_enable ? "启用" : "禁用"} 
                                                                        color={source.is_enable ? "success" : "error"}
                                                                        size="small"
                                                                    />
                                                                </TableCell>
                                                                <TableCell>{formatDate(source.last_crawl_time)}</TableCell>
                                                                <TableCell>
                                                                    <Box sx={{ display: 'flex', gap: 1 }}>
                                                                        <IconButton 
                                                                            size="small" 
                                                                            onClick={() => handleEdit(source)}
                                                                            title="编辑"
                                                                        >
                                                                            <span className="material-icons">edit</span>
                                                                        </IconButton>
                                                                        <IconButton 
                                                                            size="small" 
                                                                            onClick={() => handleToggleStatus(source.id, !source.is_enable)}
                                                                            title={source.is_enable ? "禁用" : "启用"}
                                                                        >
                                                                            <span className="material-icons">
                                                                                {source.is_enable ? "block" : "check_circle"}
                                                                            </span>
                                                                        </IconButton>
                                                                        <IconButton 
                                                                            size="small" 
                                                                            onClick={() => handleToggleEnhancedCrawl(source.id, !source.enhanced_crawl_flag)}
                                                                            title={source.enhanced_crawl_flag ? "禁用增强抓取" : "启用增强抓取"}
                                                                        >
                                                                            <span className="material-icons">
                                                                                {source.enhanced_crawl_flag ? "auto_fix_high" : "auto_fix_off"}
                                                                            </span>
                                                                        </IconButton>
                                                                        <IconButton 
                                                                            size="small" 
                                                                            onClick={() => handleDelete(source.id)}
                                                                            title="删除"
                                                                        >
                                                                            <span className="material-icons">delete</span>
                                                                        </IconButton>
                                                                        <IconButton 
                                                                            size="small" 
                                                                            component="a"
                                                                            href={`/pages/business/sourceDetail.html?id=${source.id}`}
                                                                            title="查看详情"
                                                                        >
                                                                            <span className="material-icons">visibility</span>
                                                                        </IconButton>
                                                                    </Box>
                                                                </TableCell>
                                                            </TableRow>
                                                        ))
                                                    )}
                                                </TableBody>
                                            </Table>
                                        </TableContainer>

                                        {/* 分页控件 */}
                                        <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
                                            <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
                                                <Typography variant="body2">每页显示:</Typography>
                                                <TextField
                                                    select
                                                    size="small"
                                                    value={pagination.pageSize}
                                                    onChange={handlePageSizeChange}
                                                    sx={{ width: 80 }}
                                                >
                                                    {[10, 20, 50, 100].map((size) => (
                                                        <option key={size} value={size}>
                                                            {size}
                                                        </option>
                                                    ))}
                                                </TextField>
                                            </Box>
                                            
                                            <Pagination
                                                count={Math.ceil(pagination.total / pagination.pageSize)}
                                                page={pagination.page}
                                                onChange={handlePageChange}
                                                color="primary"
                                                showFirstButton
                                                showLastButton
                                                className="pagination"
                                            />
                                        </Box>
                                    </>
                                )}

                                {activeTab === 1 && (
                                    <Box sx={{ mt: 3 }}>
                                        <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', mb: 2 }}>
                                            <Typography variant="h6">批量管理注释信息</Typography>
                                            <Button 
                                                className="btn-primary"
                                                onClick={handleBatchUpdateComments}
                                                disabled={commentLoading}
                                                startIcon={commentLoading ? <CircularProgress size={20} /> : <span className="material-icons">save</span>}
                                            >
                                                {commentLoading ? '保存中...' : '批量保存'}
                                            </Button>
                                        </Box>
                                        <Typography variant="body2" color="text.secondary" gutterBottom>
                                            在此页面您可以批量更新抓取源的注释信息，帮助团队成员更好地理解每个数据源的用途和特点。
                                        </Typography>
                                        
                                        <TableContainer component={Paper} sx={{ mt: 2, border: '1px solid #E5E5E5' }}>
                                            <Table>
                                                <TableHead>
                                                    <TableRow>
                                                        <TableCell sx={{ fontWeight: 'bold' }}>ID</TableCell>
                                                        <TableCell sx={{ fontWeight: 'bold' }}>站点标题</TableCell>
                                                        <TableCell sx={{ fontWeight: 'bold' }}>注释信息</TableCell>
                                                        <TableCell sx={{ fontWeight: 'bold' }}>操作</TableCell>
                                                    </TableRow>
                                                </TableHead>
                                                <TableBody>
                                                    {loading ? (
                                                        <TableRow>
                                                            <TableCell colSpan={4} align="center">
                                                                <CircularProgress size={24} sx={{ mr: 1 }} />
                                                                <Typography>加载中...</Typography>
                                                            </TableCell>
                                                        </TableRow>
                                                    ) : sources.length === 0 ? (
                                                        <TableRow>
                                                            <TableCell colSpan={4} align="center">
                                                                <Typography>暂无数据</Typography>
                                                            </TableCell>
                                                        </TableRow>
                                                    ) : (
                                                        sources.map((source) => (
                                                            <TableRow 
                                                                key={source.id}
                                                                className="data-table"
                                                            >
                                                                <TableCell>{source.id}</TableCell>
                                                                <TableCell>{source.site_title}</TableCell>
                                                                <TableCell>
                                                                    <TextField
                                                                        fullWidth
                                                                        value={source.comment}
                                                                        onChange={(e) => {
                                                                            const updatedSources = sources.map(s => 
                                                                                s.id === source.id 
                                                                                    ? { ...s, comment: e.target.value } 
                                                                                    : s
                                                                            );
                                                                            setSources(updatedSources);
                                                                        }}
                                                                        multiline
                                                                        rows={2}
                                                                        variant="outlined"
                                                                        size="small"
                                                                        placeholder="输入注释信息..."
                                                                    />
                                                                </TableCell>
                                                                <TableCell>
                                                                    <Button 
                                                                        size="small"
                                                                        variant="outlined"
                                                                        onClick={() => handleEdit(source)}
                                                                        className="btn"
                                                                    >
                                                                        编辑详情
                                                                    </Button>
                                                                </TableCell>
                                                            </TableRow>
                                                        ))
                                                    )}
                                                </TableBody>
                                            </Table>
                                        </TableContainer>
                                    </Box>
                                )}
                            </div>
                        </div>
                    </main>

                    {/* 页脚 */}
                    <footer className="footer">
                        <div className="container">
                            <div className="footer-content">
                                <div className="footer-copyright">
                                    ? 2023 盖世数据智能分析平台. All rights reserved.
                                </div>
                                <ul className="footer-links">
                                    <li><a href="#">帮助中心</a></li>
                                    <li><a href="#">使用协议</a></li>
                                    <li><a href="#">隐私政策</a></li>
                                    <li><a href="#">联系我们</a></li>
                                </ul>
                            </div>
                        </div>
                    </footer>

                    {/* 添加/编辑对话框 */}
                    <Dialog open={openDialog} onClose={handleCloseDialog} maxWidth="md" fullWidth>
                        <DialogTitle>{editingSource ? '编辑抓取源' : '添加抓取源'}</DialogTitle>
                        <DialogContent>
                            <Grid container spacing={2} sx={{ mt: 1 }}>
                                <Grid item xs={12}>
                                    <TextField
                                        label="站点URL"
                                        fullWidth
                                        value={formData.siteUrl}
                                        onChange={(e) => handleFieldChange('siteUrl', e.target.value)}
                                        placeholder="请输入完整的URL地址"
                                        variant="outlined"
                                    />
                                </Grid>
                                <Grid item xs={12}>
                                    <TextField
                                        label="站点标题"
                                        fullWidth
                                        value={formData.siteTitle}
                                        onChange={(e) => handleFieldChange('siteTitle', e.target.value)}
                                        placeholder="请输入站点标题"
                                        variant="outlined"
                                    />
                                </Grid>
                                <Grid item xs={12}>
                                    <TextField
                                        label="注释信息"
                                        fullWidth
                                        value={formData.comment}
                                        onChange={(e) => handleFieldChange('comment', e.target.value)}
                                        placeholder="请输入注释信息，说明此数据源的特点和用途"
                                        multiline
                                        rows={3}
                                        variant="outlined"
                                        helperText="注释信息将帮助团队成员更好地理解此数据源"
                                    />
                                </Grid>
                                <Grid item xs={12} sm={6}>
                                    <FormControlLabel
                                        control={
                                            <Switch
                                                checked={formData.isEnable}
                                                onChange={(e) => handleFieldChange('isEnable', e.target.checked)}
                                            />
                                        }
                                        label="是否启用"
                                    />
                                </Grid>
                                <Grid item xs={12} sm={6}>
                                    <FormControlLabel
                                        control={
                                            <Switch
                                                checked={formData.enhancedCrawlFlag}
                                                onChange={(e) => handleFieldChange('enhancedCrawlFlag', e.target.checked)}
                                            />
                                        }
                                        label="增强抓取"
                                    />
                                    <Typography variant="caption" display="block" color="text.secondary">
                                        启用后将对该源进行深度内容分析和提取
                                    </Typography>
                                </Grid>
                            </Grid>
                        </DialogContent>
                        <DialogActions>
                            <Button onClick={handleCloseDialog}>取消</Button>
                            <Button 
                                onClick={handleSave} 
                                className="btn-primary"
                            >
                                {editingSource ? '更新' : '添加'}
                            </Button>
                        </DialogActions>
                    </Dialog>

                    {/* 提示消息 */}
                    <Snackbar
                        open={snackbar.open}
                        autoHideDuration={6000}
                        onClose={handleCloseSnackbar}
                    >
                        <Alert 
                            onClose={handleCloseSnackbar} 
                            severity={snackbar.severity}
                            sx={{ width: '100%' }}
                        >
                            {snackbar.message}
                        </Alert>
                    </Snackbar>
                </div>
            );
        }

        // 渲染组件到页面
        const root = ReactDOM.createRoot(document.getElementById('root'));
        root.render(<App />);
    </script>
</body>

</html>